<style>
		body { font-size: 62.5%; }
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#items-contain { width: 350px; margin: 20px 0; }
		div#items-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#items-contain table td, div#items-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
	</style>
<script type="text/javascript">
	jQuery(function(){
		//
		$( "#dialog:ui-dialog" ).dialog( "destroy" );
		//INITIAL DATATABLE
		initPage();
		//var status = $("#status").buttonset();
		
		//
		
		var name = $( "#name" ),
		price = $( "#price" ),
		desc = $( "#desc" ),
		status = $("#status").buttonset(),
		allFields = $( [] ).add( name ).add( price ).add( desc ).add(status),
		tips = $( ".validateTips" );
	function appendTbody(item){
		$( "#items tbody" ).append( "<tr>" +
				"<td>" + item.name + "</td>" + 
				"<td>" + item.price + "</td>" + 
				"<td>" + item.status + "</td>" +
				"<td>"+item.desc+"</td>"+
			"</tr>" );
	}
	function initPage(){
		var initObj = $.ajax({
			url:"/myket/itemctrl/list",
			global: false,
			type:"POST",
			dataType:"json",
			success:function(data,textStatus,jqXHR){
				var itemList = data;
				jQuery.each(itemList,function(index,value){
					appendTbody(value);
					var imgSrc = "images/n6461.jpg";
					fnItembox(imgSrc,'#',value.name,'23/05/2011',value.price,value.status+":"+value.desc,"tag");
				});
				 
				
			},
			error:function(jqXHR, textStatus, errorThrown){
				alert(errorThrown);
			}
		}).responseText;
	}
	
	function updateTips( t ) {
		tips
			.text( t )
			.addClass( "ui-state-highlight" );
		setTimeout(function() {
			tips.removeClass( "ui-state-highlight", 1500 );
		}, 500 );
	}

	function checkLength( o, n, min, max ) {
		if ( o.val().length > max || o.val().length < min ) {
			o.addClass( "ui-state-error" );
			updateTips( "Length of " + n + " must be between " +
				min + " and " + max + "." );
			return false;
		} else {
			return true;
		}
	}

	function checkRegexp( o, regexp, n ) {
		if ( !( regexp.test( o.val() ) ) ) {
			o.addClass( "ui-state-error" );
			updateTips( n );
			return false;
		} else {
			return true;
		}
	}
	
	$( "#dialog-form" ).dialog({
		autoOpen: false,
		height: 400,
		width: 350,
		modal: true,
		buttons: {
			"Add Item": function() {
				var bValid = true;
				allFields.removeClass( "ui-state-error" );

				//bValid = bValid && checkLength( name, "username", 3, 16 );
				//bValid = bValid && checkLength( email, "email", 6, 80 );
				//bValid = bValid && checkLength( password, "password", 5, 16 );

				//bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
				// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
				//bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
				//bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

				if ( bValid ) {
					/*
					$( "#users tbody" ).append( "<tr>" +
						"<td>" + name.val() + "</td>" + 
						"<td>" + email.val() + "</td>" + 
						"<td>" + password.val() + "</td>" +
					"</tr>" ); 
					*/
					var opt = status.button("option","radio");
					alert(opt.val());
					var jsonObj = $.ajax({
						url:"/myket/itemctrl/add",
						contentType:'application/x-www-form-urlencoded',
						global: false,
						type:"POST",
						data:({name:name.val(),price:price.val(),desc:desc.val(),status:status.val()}),
						dataType:"json",
						success:function(data,textStatus,jqXHR){
							appendTbody(data);
						},
						error:function(jqXHR, textStatus, errorThrown){
							alert(errorThrown);
						}
					}).responseText;
					$( this ).dialog( "close" );
				}
			},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			allFields.val( "" ).removeClass( "ui-state-error" );
		}
	});

	$( "#add-item" )
		.button()
		.click(function() {
			$( "#dialog-form" ).dialog( "open" );
		});
	});
	
	
</script>

<div id="dialog-form" title="Add New Item">
	<p class="validateTips">All form fields are required.</p>

	<form>
		<fieldset>
			<label for="name">Name</label> 
			<input type="text" name="name"
				id="name" class="text ui-widget-content ui-corner-all" /> 
				<label
				for="price">Price(บาท)</label> 
				<input type="text" name="price" id="price"
				value="" class="text ui-widget-content ui-corner-all" />
				<label
				for="desc">Description</label> 
				<input type="text"
				name="desc" id="desc" value=""
				class="text ui-widget-content ui-corner-all" />
				<label for="status">Status</label>
				<div id="status">
					<input type="radio" id="status-sell" name="radio" checked="checked" /><label for="status-sell">SELL</label>
					<input type="radio" id="status-sold" name="radio" /><label for="status-sold">SOLD</label>
				</div>
				
		</fieldset>
	</form>
</div>

<div id="items-contain" class="ui-widget">
	<button id="add-item">Add New Item</button>
	<h1>Existing Users:</h1>
	<div id="item-container">
		<div class="item-post">
			<div class="thumbnail image2">
				<a rel="prettyPhoto[gallery1]" href="http://www.socialtrendy.com/wp-content/uploads/2010/09/fbsms.jpg">
					<img class="lightbox image" alt="วิธีการใช้งาน Facebook Text เพื่อรับข้อมูลอัพเดทใน Facebook ทาง SMS" src="http://www.socialtrendy.com/wp-content/themes/mymag/timthumb.php?src=http://www.socialtrendy.com/wp-content/uploads/2010/09/fbsms.jpg&h=184&w=174&zc=1" style="opacity: 1;">
				</a>
			</div>
			<div class="content">
				<h2>
					สินค้าชิ้นที่ 1
				</h2>
				<span class="date">25/05/2011</span>
				<span class="comments">No comments</span>
				<p>อันนี้เป็นบริการเสริมสำหรับผู้ที่ติดตามการอัพเดทใน Facebook ตลอดเรียกว่าคลั่ง FB ละกันครับ อัตราค่าบริการ - ฟรี 7 วัน - หลังจากนั้นเก็บ 9 บาท...</p>
				<div style="position:absolute;right:5px;bottom:5px"></div>
			</div>
		</div>
	</div>
	<table id="items" class="ui-widget ui-widget-content">
		<thead>
			<tr class="ui-widget-header ">
				<th>Name</th>
				<th>Price</th>
				<th>Status</th>
				<th>Desc</th>
			</tr>

		</thead>
		<tbody>
			

		</tbody>
	</table>
</div>
